// 形象进度

<template>
    <f7-page class="image-progress-list"
             ptr
             @ptr:refresh="refresh"
             infinite
             :infinite-distance="50"
             :infinite-preloader="true"
             @infinite="infinite">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>形象进度</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{controlData.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <div class="current fff">
            <div>
                当前形象进度：<span>{{controlData.engineeInfo.progressName}}</span>
            </div>
            <van-button v-has="'project:progress:add'"
                        icon="plus"
                        size="mini"
                        plain
                        type="info"
                        @click="fnAdd()">新增</van-button>
        </div>

        <v-accordion title="调整记录"
                     disabled>
            <span slot="accordion-title-right"
                  class="color">共<span>{{query.recordsTotal}}</span>条</span>
            <f7-list media-list
                     v-if="query.data.length > 0">
                <template v-for="(item, index) in query.data">
                    <f7-list-item :key="index"
                                  @click.native="fnDetail(item)">
                        <div class="list-item-content">
                            <div class="content-left">
                                <span><span></span></span>
                                <i class="dashed"></i>
                            </div>
                            <div class="content-right">
                                <div class="fff">
                                    <p class="time fff">
                                        {{item.createTime}}
                                        <span v-if="item.statusText"
                                              class="tag"
                                              :class="fnStatusClass(item)">{{item.statusText}}</span>
                                    </p>
                                    <div class="grey">
                                        <section>
                                            <label>登记人：</label>
                                            <span>{{item.createUserName}}</span>
                                        </section>
                                        <section>
                                            <label>登记单位：</label>
                                            <span>{{item.createOrgName}}</span>
                                        </section>

                                        <div class="fff">
                                            <p>{{item.progressName}}</p>
                                            <span>{{item.content}}</span>
                                            <template v-if="item.attachmentIds">
                                                <v-show-file :fileArr="JSON.parse(item.attachmentIds)"></v-show-file>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </f7-list-item>
                </template>
            </f7-list>
            <van-empty v-else
                       description="暂无数据"></van-empty>
        </v-accordion>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: "/project/progress/getListModel",
            query: "/project/progress/query"
        }
    }
    onInit () {
        this.setSearch("engineeId", this.$params.engineeId, "list")
    }
    mixin () {
        return {
            data () {
                return {
                    controlData: {
                        // 状态枚举
                        statusEnums: [],
                        // 项目信息
                        engineeInfo: {}
                    }
                }
            },
            methods: {
                // 新增
                fnAdd () {
                    this.$f7router.navigate(`/business/construction/enginee/imageProgress/add?action=processStart&appCode=progressCase&engineeId=${this.$f7route.query.engineeId}`)
                },
                //详情
                fnDetail (item) {
                    this.getWorkflowArgs({ formId: item.caseId }).then(rlt => {
                        let url = "";
                        rlt.appUrl = '/business/construction/enginee/imageProgress/detail'

                        if (rlt.taskId) {
                            url = `${rlt.appUrl}?action=processEdit&taskId=${rlt.taskId}&assigneeId=${rlt.assigneeId}&appCode=${rlt.appCode}&version=${rlt.version}&_r=${new Date().getTime()}`;
                        } else if (rlt.historyTaskId) {
                            url = `${rlt.appUrl}?action=processView&historyTaskId=${rlt.historyTaskId}&appCode=${rlt.appCode}&version=${rlt.version}&_r=${new Date().getTime()}&assigneeId=${rlt.assigneeId}`;
                        } else {
                            this.$toast("无法获取应用的处理地址");
                        }

                        if (url) {
                            this.$f7router.navigate(url);
                        }
                    })
                    // this.$f7router.navigate(`/business/construction/enginee/imageProgress/detail?action=processEdit&appCode=progressCase&engineeId=${this.$f7route.query.engineeId}&caseId=${item.caseId}`)
                },
                // 审核状态的class
                fnStatusClass (item) {
                    if (item.statusText == '审核通过') {
                        return 'tag-green-fill'
                    } else if (item.statusText == '审批中') {
                        return 'tag-yellow-fill'
                    } else {
                        return 'tag-fill'
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.image-progress-list {
    .van-notice-bar {
        margin-bottom: 10px;
    }

    .current {
        display: flex;
        justify-content: space-between;
        padding: 20px 10px;
        margin-bottom: 10px;

        > div {
            span {
                color: #3385ff;
            }
        }

        .van-button {
            width: 60px;
            flex-shrink: 0;
            margin-left: 10px;
        }
    }

    .accordion-list {
        span.color {
            font-size: 12px;
            font-weight: 400;
            color: #61677a;
            line-height: 17px;

            > span {
                margin: 0 4px;
                font-size: 16px;
                color: #3385ff;
            }
        }
    }

    .media-list {
        @{deep}.media-item:last-child {
            .dashed {
                display: none;
            }
        }
    }

    .list-item-content {
        display: flex;

        .content-left {
            width: 40px;
            flex-shrink: 0;
            margin: 0 auto;
            padding-top: 10px;
            position: relative;

            > span {
                width: 17px;
                height: 17px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #3385ff;
                background: #e7f1ff;
                border-radius: 100%;
                margin: 6px auto;

                span {
                    width: 9px;
                    height: 9px;
                    background: #3385ff;
                    border-radius: 100%;
                }
            }

            > i.dashed {
                position: absolute;
                border-right: 1px dashed #d2cccc;
                height: 100%;
                left: 0;
                right: 0;
                margin: auto;
                width: 0;
                top: 35px;
            }
        }

        .content-right {
            flex: 1;

            p.time {
                margin: 0;
                padding: 15px 0;
                font-size: 16px;
                display: flex;
                justify-content: space-between;

                .tag {
                    margin-left: 10px;
                    flex-shrink: 0;
                }
            }

            div.grey {
                font-size: 14px;
                background-color: #f9fafc;
                border-radius: 2px;

                section {
                    display: flex;
                    padding: 10px 10px;

                    label {
                        width: 38%;
                        flex-shrink: 0;
                        color: #888;
                    }

                    > span {
                        .f7-icons {
                            color: #888;
                            margin: 0 4px 0 10px;
                            font-size: 14px;
                        }

                        .color {
                            color: #3385ff;
                        }
                    }
                }

                > div {
                    background-color: #f3f5fa;
                    padding: 10px;
                    font-size: 12px;
                    color: #888;
                    display: flex;
                    flex-direction: column;

                    > p {
                        margin: 0;
                        font-size: 13px;
                        font-weight: 500;
                        color: #0f1826;
                        line-height: 22px;
                    }

                    > span {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
}
</style>
